<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>切换地图样式</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>

</head>

<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onSetMapStyle('aegis://styles/aegis/Streets')">普通</button>
    <button onclick="onSetMapStyle('aegis://styles/aegis/StreetsLight')">浅色</button>
    <button onclick="onSetMapStyle('aegis://styles/aegis/StreetsDark')">暗色</button>
    <button onclick="onSetMapStyle('aegis://styles/aegis/Satellite512')">卫星图</button>
    <!--<button onclick="onSetMapStyle('aegis://styles/aegis/Road')">路网</button>-->
</div>
</body>

</html>

<script>
    //示例说明：
    //本示例展示如何在不通的底图之间进行切换（主要是影像图和矢量图切换时有差异）


    //自定义示例参数
    mapOptions = {
        zoom: 14
    }

    //示例功能代码
    var styleData =  'aegis://styles/aegis/Streets'//'aegis://styles/aegis/Satellite512'//

    var intervalId = null

    function rerenderGrid() {
        if (map.style._loaded) {
            clearInterval(intervalId)
            //20210917 这里要新增这句来恢复用户创建的Layer对象的基线图层，不然会出错
            map.reloadUserLayer()
        }
    }

    //当调用map.setStyle()时，通过map.isStyleLoaded()方法来获取样式是否加载完成，当样式加载完成后，清除定时器并刷新用户图层
    function onSetMapStyle(style) {
        if (styleData != style) {
            styleData = style
            map.setBaseStyle(styleData)
            intervalId = setInterval(() => {
                rerenderGrid()
            }, 500)
        }
    }

    //初始化电网or地理图
    window.onload = function () {
        loadGeoMap()
    }

</script>
